<template>
  <div>
      <div class="all">
          <div class="left">
              <img :src="img" alt="">
          </div>
          <div class="right">
              <ul class="top">
                  <li>{{name}}</li>
                  <li><van-progress pivot-text="100" color="#f2826a" :percentage="100" /></li>
                  <li style="font-size:13px">{{title}}</li>
              </ul>
              <ul class="bottom" style="display:flex;justify-content:space-between;margin-top:10px">
                  <li>￥{{price}}</li>
                  <li style="margin-left:130px"><button style="font-size:13px">立即查看</button></li>
              </ul>
          </div>
      </div>
      <div class="mmm">

      </div>
  </div>
</template>

<script>
export default {
     props:["img","name","title","price"]
}
</script>

<style scoped>
.mmm{
    height: 50px;
}
.all{
    margin-top:50px
}
    .left img{
        width: 115px;
        height: 115px;
    }
    .all{
        display: flex;
    }
    .right .top li{
        margin-top:15px
    }
</style>